//jquery选择器，选中指定元素，绑定实现，执行代码逻辑
$('.btn-list').on('click', function () {
    $('#music-list-dialog').animate({ top: '10rem' }, 100)
})

//点击关闭按钮折叠列表框（课堂练习）
$('#btn-close').click(function () {
    $('#music-list-dialog').animate({ top: '100%' }, 100)
})

/*************************/
//动态创建音频对象，音乐资源的播放通过该对象实现（并且将其包装为jquery对象）
const player = $('<audio>')
//歌曲api接口地址
const baseURL = 'http://home.softeem.xin:8088/music/listAll'
//声明空数组缓存从服务端读取的歌曲数据
let musics = []
//初始化当前正在播放的歌曲索引
let currentIndex = 0

//前端如何请求服务端数据，有哪些方式？
// 异步请求-ajax（XmlHttpRequest实现与服务端交互）
// websocket-全双工通信（弹幕，直播推流）
//异步
$.get(baseURL, function (data) {
    //缓存数据到变量中
    musics = data
    //循环遍历歌曲列表
    $.each(musics, (i, m) => {
        $('#music-list').append(`<li data-index="${i}">${m.name}</li>`)
    })
})

//html5 新增一个全局属性  data-[key]=[value]
//针对动态生成的元素无法直接通过选择器选中,通常需要先选中存在的父元素，再通过父元素将事件传递子元素上
//为列表中每一个列表项绑定点击事件，实现歌曲播放
//事件委派（委托）
$('#music-list').on('click', 'li', function () {
    // 清除上一首歌曲的高亮
    $('#music-list li').removeClass('highlight');
    //获取当前被点击的列表项索引值（歌曲索引）
    currentIndex = $(this).data('index')
    //获取需要被播放的歌曲对象
    let m = musics[currentIndex]
    //获取需要被播放的歌曲名字
    $('.music-name').text(m.name);
    //为播放器对象设置播放源
    player.prop('src', m.path)
    // 添加类以触发旋转动画
    $('.disc').addClass('playing');
    // 高亮显示正在播放的歌曲
    $(this).addClass('highlight');
    //主动触发播放事件
    // player.trigger('play') //player[0].play()
    startPlay()
})

//开始播放
function startPlay() {
    // 获取暂停按钮元素
    const playPauseButton = document.querySelector('.btn-play-pause i');
    //使用定时器，定时监听播放器准备状态
    let flag = setInterval(function () {
        let state = player.prop('readyState')
        if (state === 4) {
            // 切换按钮图标为播放图标
            playPauseButton.classList.remove('fa-play');
            playPauseButton.classList.add('fa-pause');
            //执行播放
            player.trigger('play')
            //清理定时器
            clearInterval(flag)
        }
    }, 50)
    //1.同步显示歌曲名称
    //2.实现唱片旋转
    //3.切换播放按钮为暂停图标
    //4.歌曲列表高亮显（背景或歌曲名）示正在播放歌曲（考虑如何清除上一首歌曲的高亮）
}

//扩展
//1. 同步显示歌曲的当前播放时长和总时长
//2. 进度条实时同步显示